<template>
	<div class="category-content">
		<div class="main-width">
			<div class="promotions-item">
				<div class="promotions-item-image">
					<img :src="imgAddress + active.picturePath" @error="error(3)">
				</div>
				<div class="promotions-item-content">
					<div class="promotions-item-title">{{active.title}}</div>
					<div class="promotions-item-time">
						<label>活动开始时间：{{active.startTime}}</label>
					</div>
					<div class="promotions-item-time">
						<label>活动结束时间：{{active.endTime}}</label>
					</div>
					<div class="promotions-item-remark" v-if="active.remark == ''">
						无
					</div>
					<div class="promotions-item-remark" v-else>
						{{active.remark}}
					</div>
					<div class="font-right promotions-update-time">时间：{{active.releaseTime}}</div>
				</div>
			</div>
			<div v-if="condition.activityId != 0&&goodsList.length != 0">
				<div class="promotions-split">
					<div class="promotions-line"></div>
					<div class="promotions-split-name">
						<div class="promotions-cn"><span>营销商品</span></div>
						<div class="promotions-en"><span>G-CLOUD PROFILE</span></div>
					</div>
				</div>
				<div>
					<div class="category-check-wrap mar-bot-20">
						<span class="category-check-name">供应商筛选：</span>					
						<span class="category-check-item" @click="setTax">
							<span class="category-check-default" :class="{'promotions-check': condition.isBill}"></span>
							含税
						</span>
						<span class="category-check-item" @click="setTax">
							<span class="category-check-default" :class="{'promotions-check': !condition.isBill}"></span>
							不含税
						</span>
						<a class="promotions-shortcut" @click="pushAll">一键参与活动</a>
					</div>
					<div class="promotions-goods">
						<ul class="category-goods-list">
							<li class="category-goods-item" v-for="(item, index) in goodsList">
								<div class="category-goods-image" @mouseenter="showMask(index)" @mouseleave="hideMask(index)">
									<router-link tag="a" target="_blank" :to="{name: 'Detail', query: {goodsId: item.goodsId, activityId: condition.activityId}}">
										<img :src="imgAddress + item.goodsImage" @error="error(1)" />
										<div class="category-hover-product" :class="{'display-none': maskShow[index].isShow}">
											<table>
												<thead>
													<tr>
														<th>SKU</th>
														<th><span v-if="condition.isBill == 0">不含税结算价</span><span v-else>含税/不含税</span></th>
														<th>库存</th>
													</tr>
												</thead>
												<tbody>
													<tr v-for="(value, index) in item.products" v-if="index < 5">
														<td class="category-table-SKU"><div>{{value.specName}}</div></td>
														<td><span v-if="condition.isBill == 0">{{value.noTaxSettlementPrice/100}}</span><span v-else>{{value.taxSettlementPrice/100}}/{{value.noTaxSettlementPrice/100}}</span></td>
														<td><span v-if="condition.isBill == 0">{{value.inventoryNum}}</span><span v-else>{{value.taxInventoryNum}}</span></td>
													</tr>
												</tbody>
											</table>
										</div>
									</router-link>
								</div>
								<div class="category-goods-money promotions">利润率：{{item.profitMargin}}%</div>
								<div class="category-goods-info">
								<div class="category-goods-price promotions">¥{{item.salePrice/100}}<span>佣金：¥{{item.commission/100}}</span></div>
									<el-tooltip class="item" effect="dark"  placement="top">
										<div slot="content">{{item.goodsName}}</div>
										<div class="category-goods-title">
											<div class="promotions-goods-channel" v-if="item.channel == 1">电商</div>
											<div class="promotions-goods-channel" v-else-if="item.channel == 2">门店</div>
											<div class="promotions-goods-channel" v-else>海淘</div>
											{{item.goodsName}}
										</div>
									</el-tooltip>
								</div>
								<div v-if="condition.isBill == 0">
									<div class="category-goods-add-default yishangjia" v-if="noInventoryNum[index].haskc == 0">暂无库存</div>
									<div class="category-goods-add-default promotions" v-else-if="item.shelves == 0" @click="addGoodsAll(index, item.goodsId)">参与活动</div>
									<div class="category-goods-add-default yishangjia" v-else>已参与活动</div>
								</div>
								<div v-else>
									<div class="category-goods-add-default yishangjia" v-if="noTaxInventoryNum[index].haskc == 0">暂无库存</div>
									<div class="category-goods-add-default promotions" v-else-if="item.shelves == 0" @click="addGoodsAll(index, item.goodsId)">参与活动</div>
									<div class="category-goods-add-default yishangjia" v-else>已参与活动</div>
								</div>
							</li>
						</ul>
					</div>
					<div class="block">
						<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :current-page.sync="condition.pageNum" :total="total" :page-size="30"></el-pagination>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {toast, imageError} from '../util/tool.js'
	import {getSalesPromotionDetails, getActGoodsList, addShelves, imgAddress} from '../config/interface.js'
	import store from '../store/index.js'
	import {fetch} from '../config/fetch.js'
	import {mapActions} from 'vuex'

	 export default{
	 	data(){
	 		return{
	 			imgAddress: imgAddress,
	 			goodsList: {},
	 			maskShow: {},
	 			noInventoryNum: {},
	    		noTaxInventoryNum: {},
	 			condition: {
	 				isBill: 0,
	 				pageNum: 1,
	 				pageSize: 30,
	 				activityId: '',
	 				userId: store.state.userId,
	 			},
	 			active: {},
	 			total: 0
	 		}
	 	},
	 	created(){
	 		this.condition.activityId = this.$route.query.id;
	 	},
	 	mounted(){
	 		this.init();
	 		if(this.condition.activityId != 0){
		 		this.actInit();
		 	}
	 	},
	 	methods: {
	 		...mapActions({ setGoodsCount: 'setGoodsCount' }),
	 		error(num){
				imageError(num, event);
			},
			init(){
				const data = {
					activityId: this.condition.activityId,
					userId: this.condition.userId
				};
				const url = getSalesPromotionDetails;

				fetch(url, data)
				.then(res => {
					this.active = res.data;
					this.active.startTime = this.active.startTime.substring(0,19);
					this.active.endTime = this.active.endTime.substring(0,19);
					this.active.releaseTime = this.active.releaseTime.substring(0,19);
				})
			},
			actInit(){
				const data = this.condition;
				const url = getActGoodsList;

				fetch(url, data)
				.then(res => {
					this.goodsList = res.data.goods;
					this.total = res.data.goodsCount;

					var arr = [];
					for(var i = 0; i < this.goodsList.length; i++){
						var opt = {
							isShow: true
						};
						arr.push(opt);
					}
					this.maskShow = arr;					
					
					var arr2 = [];
					if(this.condition.isBill == 0){
						for(var i = 0; i < this.goodsList.length; i++){
							var item = this.goodsList[i];
							var obj = {
								haskc: 0
							};
							for(var j = 0; j < item.products.length; j++){
								if(item.products[j].inventoryNum != 0){
									obj.haskc = 1;
								}								
							}
							arr2.push(obj);
						}
						this.noInventoryNum = arr2;
					}else{
						for(var i = 0; i < this.goodsList.length; i++){
							var item = this.goodsList[i];
							var obj = {
								haskc: 0
							};
							for(var j = 0; j < item.products.length; j++){
								if(item.products[j].taxInventoryNum != 0){
									obj.haskc = 1;
								}								
							}
							arr2.push(obj);
						}
						this.noTaxInventoryNum = arr2;
					}				
				})
			},
			showMask(index){   		
	    		this.maskShow[index].isShow = false;
		    },
		    hideMask(index){
	    		this.maskShow[index].isShow = true;
		    },
		    setTax(){
	    		const isBill = this.condition.isBill;
	    		if(isBill == 0){
	    			this.condition.isBill = 1;
	    		}else{
	    			this.condition.isBill = 0;
	    		}
	    		this.condition.pageNum = 1;
	    		this.actInit();		    		
		    },
		    handleCurrentChange(val) {
		        this.condition.pageNum = val;
		        this.actInit();
		    },
		    addGoodsAll(index, goodsId){
		    	var List = [];
				var tax = this.condition.isBill;
				var tableInfo = this.goodsList[index].products;
				for(var i in tableInfo){
					var goodsItem = {};
					goodsItem.productId = tableInfo[i].productId;
					goodsItem.goodsId = goodsId;					
					goodsItem.hasTax = tax;
					goodsItem.activityDetailId = tableInfo[i].activityDetailId;
					List.push(goodsItem);
				}
				var data = {
					goodsList: List,
					userId: this.condition.userId
				};
				var url = addShelves;
				fetch(url, data)
				.then(res => {
					if(res.code == 10000){
						var str = "参与活动成功";
	                    toast(str, 1, false);
	                    this.actInit();
	                    this.setGoodsCount();
					}else{
						var str = "参与活动失败";
						toast(str, 2, false);
					}                   
                });
		    },
		    pushAll(){
				var List = [];
				var tax = this.condition.isBill;
				for(var i in this.goodsList){
					var products = this.goodsList[i].products;
					for(var j in products){
						var goodsItem = {};
						goodsItem.productId = products[j].productId;
						goodsItem.hasTax = tax;
						goodsItem.goodsId = this.goodsList[i].goodsId;
						goodsItem.activityDetailId = this.goodsList[i].products[j].activityDetailId;
						List.push(goodsItem);
					}
				}
				var data = {
					goodsList: List,
					userId: this.condition.userId
				};
				var url = addShelves;
				fetch(url, data)
				.then(res => {
					if(res.code == 10000){
						var str = "参与活动成功";
	                    toast(str, 1, false);
	                    this.actInit();
	                    this.setGoodsCount();
					}else{
						var str = "参与活动失败";
						toast(str, 2, false);
					}                   
                });

			}
	 	}
	 }
</script>